<template>
    <view class="app">
        <load :ready="ready"></load>

        <view class="form">
			<!-- {{userInfo}} -->
            <u-form :model="form" ref="uForm" :error-type="['toast']">
				<u-form-item label="头像"  label-width="160">
					<view class="ibox" @click="up">
					    <u-image :src="temp || form.agencyPortrait" shape="circle" width="180" height="180"></u-image>
					</view>
				</u-form-item>
				<u-form-item label="昵称"  prop="agencyName" label-width="160"><u-input v-model="form.agencyName" /></u-form-item>
				<u-form-item label="手机号"   label-width="160"><u-input v-model="form.mobile" disabled /></u-form-item>
            </u-form>
        </view>
        
		<u-gap height="160"></u-gap>
		<view class="btnbox fixed">
			<u-button type="primary" @click="submit()" shape="circle" :custom-style="btnStyle">保存</u-button>
		</view>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            // ready: true,
            sex:[{
                label:'男',
                value:1
            },{
                label:'女',
                value:2
            }],
            addresDefault:[0,0,0],
            addresShow:false,
            addresList:[],
            sexShow: false,
			btnStyle: {
				...this.$config.btnStyle,
				width:'100%'
			},
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        // 可以单个或者同时写两个触发验证方式
                        trigger: ['change', 'blur']
                    }
                ]
            },
            form: {
                agencyPortrait: ''
            },
			temp: '',
        };
    },
    onLoad() {
        that = this;
		 uni.$on('uAvatarCropper',this.uAvatarCropper);
		this.getInit();
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onShow() {
    },
    onUnload() {
        that = null;
		uni.$off('uAvatarCropper',this.uAvatarCropper);
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async uAvatarCropper(path){
		       console.log('uAvatarCropper path');
		    this.temp = path;
		 },
		async getInit(){
			let res = await this.$api.agencyAuthInfo({
			});
			if (res.data.code == this.$config.RESOK) {
				let form = res.data.data;
				this.form = form;
				this.ready=true
			} else {
				this.$message.error(res.data.msg);
			}
		},
      async submit(){
          let istrue = true;
          this.$refs.uForm.validate(valid => {
              if (valid) {
                  console.log('验证通过');
              } else {
                  console.log('验证失败');
                  istrue= false
              }
          });
          if(!istrue)return;
          uni.showLoading({
              title:'提交中'
          })
          let param = Object.assign({},this.form);
          if(this.temp.length){
              uni.showLoading({
                  title: '上传头像中',
                  mask: false
              });
             let data  = await that.$up(this.temp, that.$config.upload);
             if(data){
                 param.agencyPortrait = data.url;
             }
          }
		  console.log('param', param);
          uni.showLoading({
              title: '上传数据中',
              mask: false
          });
          const res = await this.$api.agencyAuthProfile(param);
          uni.hideLoading();
          if (res.data.code == this.$config.RESOK) {
             let userInfo =  {
				 ...this.userInfo,
				 ...param,
			 }
             this.setUserInfo(userInfo);
              this.$common.showTip(res.data.msg, 'success');
              setTimeout(()=>{
                  this.$common.goback();
              }, this.$config.timeLoad)
          } else {
              this.$common.showTip(res.data.msg, 'none');
          }
      },
		up() {
			this.$u.route({
		        // 关于此路径，请见下方"注意事项"
		        url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
		        // 内部已设置以下默认参数值，可不传这些参数
		        params: {
		            // 输出图片宽度，高等于宽，单位px
		            destWidth: 500,
		            // 裁剪框宽度，高等于宽，单位px
		            rectWidth: 280,
		            // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
		            fileType: 'jpg',
		        }
		    })
		},
        ...mapActions(['setUserInfo'])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: $uni-bg-color-grey;
}

.ibox{
	width: 180rpx;
	height: 180rpx;
	position: relative;
	.icon {
	    width: 54rpx;
	    height: 54rpx;
	    position: absolute;
	    right: 0;
	    bottom: 0;
	}
}
.avathor {
    background-color: $uni-bg-color;
    padding: 30rpx 0 40rpx;
    .ibox {
       
    }
   
}
.form {
	background: #fff;
	padding: 0 30rpx;
    .form-item {
        background: $uni-bg-color;
        margin-bottom: 30rpx;
        padding: 0 40rpx;
    }
}
</style>
